<script src="${rc.getContextPath()}/manage/js/dwzCustomJs/dwz.custom.advancedquery.js?v=${ver}" type="text/javascript"></script>
<script src="${rc.getContextPath()}/manage/js/echarts/echarts.js?v=${ver}" type="text/javascript"></script>

<form method="post" action="${rc.getContextPath()}/manage/inspectRecord/defectTopModelSearch" class="required-validate" onsubmit="return navTabSearch(this)">
<input type="hidden" id="advancedStatus" name="advancedStatus" value="${condition.advancedStatus!''}" />
<div class="pageHeader">
    <div class="searchBar">
        <ul class="searchContent">
            <li class="notnormal"><label><@label key='inspectDateTime.C,colon'>点检时间：</@label></label>
            <input type="text" class="date required"  datefmt="yyyy-MM-dd HH:mm:ss" readonly="readonly" name="minCreateDateTime"  value="${condition.minCreateDateTime!''}"/><a class="inputDateButton" href="javascript:;">选择</a></li>
            <li class="notnormal"><label><@label key="to.C">至</@label></label>
            <input type="text" class="date required" datefmt="yyyy-MM-dd HH:mm:ss" readonly="readonly" name="maxCreateDateTime" min_Date="{minCreateDateTime}" value="${condition.maxCreateDateTime!''}"/><a class="inputDateButton" href="javascript:;">选择</a></li>
            <li><label>TOP N：</label><input type="text" class="required" name="numPerPage" value="${condition.numPerPage!''}" min="3" max="10"/></li>
            <li class="query">
                <div class="buttonActive">
                    <div class="buttonContent">
                        <button type="submit"><@label key="query.B">查询</@label></button>
                    </div>
                </div>
            </li>
            <li class="advancedQuery" >            
                <a id="advancedQuery"href="javascript:void(0);"   onclick="openAdvanced(navTab.getCurrentPanel(), 'defect_topN')">
                    <@label key="advancedQuery.C">高级查询</@label>
                </a>
            <span  onclick="openAdvanced(navTab.getCurrentPanel(), 'defect_topN');"></span>            
        </li>
        </ul>
    </div>
</div>
<div id="collapsablePanel" style="display:none;"class="pageHeader" >
    <div class="searchBar">
        <ul class="searchContent">
            <li ><label><@label key='materialCode.C,colon'>物料编号：</@label></label> <input type="text" name="materialCode" value="${condition.materialCode!''}"/></li>
            <li ><label><@label key='materialText.C,colon'>物料名称：</@label></label> <input type="text" name="materialText" value="${condition.materialText!''}"/></li>
            <li ><label><@label key='productionControlNum.C,colon'>生产管理号：</@label></label> <input type="text" name="productionControlNum" value="${condition.productionControlNum!''}" /></li>
        </ul>
   
        <ul class="searchContent">
            <li ><label><@label key='productionOrderNum.C,colon'>生产订单编号：</@label></label> <input type="text" name="productionOrderNum" value="${condition.productionOrderNum!''}"/></li>
            <li><label><@label key='orderType.C,colon'>订单类型：</@label></label>
            <select name="orderTypeCode">
                <option value="" ><@label key='all.C'>所有</@label></option>
                <#if orderTypes??>
                    <#list orderTypes as orderType>
                        <option value="${orderType.orderTypeCode!''}" <#if condition.orderTypeCode?? && condition.orderTypeCode == orderType.orderTypeCode> selected</#if> >${orderType.orderTypeText!''}</option>
                    </#list>
                </#if>
            </select>
            </li>
            <li ><label><@label key='productionlotNum.C,colon'>生产批次号：</@label></label><input type="text" name="productionlotNum" value="${condition.productionlotNum!''}"/></li>
        </ul>
        <ul class="searchContent">
            <li ><label><@label key="workCenter.C,colon">工作中心：</@label></label>
                <input id="workCenterLookup.workCenterText" name="workcenterText" type="text"  value="${condition.workcenterText!''}" postField="workCenterCode"  value="${condition.workCenterText!''}" suggestFields="workCenterCode,workCenterText" 
                suggestUrl="${rc.getContextPath()}/manage/workCenter/workCenterSuggest" lookupGroup="workCenterLookup"/>
            </li>
            <li ><label><@label key="workUnit.C,colon">作业单元：</@label></label>
                 <input class="look" id="workUnitLookup.workUnitText" name="workunitText" type="text" value="${condition.workunitText!''}" postField="workUnitCode" suggestFields="workUnitCode,workUnitText" 
                    suggestUrl="${rc.getContextPath()}/manage/workUnit/workUnitSuggest" lookupGroup="workUnitLookup"/>
                    <a class="btnLook" href="${rc.getContextPath()}/manage/workUnit/workUnitLookUp?lookupType=radio" rel="workUnitLookup_dialog" title="<@label key='select.C,workUnit.C'>选择作业单元</@label>" lookupGroup="workUnitLookup" ></a>
             </li>
             <li ><label><@label key='inspectUser.C,colon'>检验人员：</@label></label> <input type="text" name="createUser" value="${condition.createUser!''}"/></li>
         </ul>
         <ul class="searchContent">
            <li><label><@label key='customer.C,colon'>客户：</@label></label> <input type="text" name="customer" value="${condition.customer!''}" /></li>
            <li><label><@label key='customerOrder.C,colon'>客户订单：</@label></label> <input type="text" name="customerOrder" value="${condition.customerOrder!''}" /></li>
            <li><label><@label key='priority.C,colon'>优先级：</@label></label> <input type="text" name="priority" value="${condition.priority!''}" /></li>
        </ul>
    </div>
</div>    
</form>
<div class="pageContent" style="overflow: auto;" layoutH="50" id="defect_topN">
    <div class="panelBar">
        <ul class="toolBar">
            <li style="margin-top: 8px;"><h1 style="text-align:left;"><@label key="graph.D">图表</@label></h1></li>
        </ul>
    </div>
    <div class="unitBox" id="chartHolder" style="float: left; display: block; overflow: hidden; width: 100%; height:400px;background: #fff">
        
    </div>
    <div class="unitBox" style="float: left; display: block; overflow: hidden; width:100%;background: #fff;height:260px;" >
        <!--  <div style="height: 36px; ">
            <h1 style="line-height: 36px;font-size:14px;">缺陷TOP${condition.numPerPage!''}</h1>
          </div> -->
          <table class="table border" width="100%">
              <thead>
                <tr>
                    <th width="80"><@label key="defectText.C">缺陷描述</@label></th>
                    <th width="80"><@label key="defectLevelText.C">缺陷等级描述</@label></th>
                    <th width="80"><@label key="responsibilityTypeText.C">责任类型描述</@label></th>
                    <th width="80"><@label key="defectTypeText.C">缺陷类型描述</@label></th>
                    <th width="50"><@label key="defectDefine.C,quantity.C">缺陷数量</@label></th>
                    <th width="50"><@label key="percentage.C">百分比</@label></th>
                </tr>
            </thead>
            <tbody>
                <#if defectTopN??>
                <#if (defectTopN?size>0 )> 
                    <#list defectTopN as tops>
                    <tr>
                        <td  name="defectText"><#if tops.defectText=="其他"><@label key='other.M'>其他</@label><#else><#if tops.defectText=="总计"><@label key='totalCount.M'>总计</@label><#else>${tops.defectText!''}</#if></#if></td>
                        <td>${tops.defectLevelText!''}</td>
                        <td>${tops.responsibilityTypeText!''}</td>
                        <td>${tops.defectTypeText!''}</td>
                        <td><a style="text-decoration:underline ;color:#289be5" name="defectCount" title="${tops.defectText!''}" target="dialog" rel="showDefectDetail" mask="true" width="900" height="600" maxable="true" 
                             href="${rc.getContextPath()}/manage/inspectRecord/defectTopDetail?defectCode=${tops.defectCode!''}&navTabId=${navTabId!''}">${tops.defectCount!''}</a></td>
                        <td>${tops.percent!''}</td>
                    </tr>
                    </#list>
                </#if><#else>
                    <tr>
                        <td colspan="6" class="noData">======<@label
                            key='noListData.C'>列表无数据</@label>=====</font>
                        </td>
                    </tr>
                </#if>
            </tbody>
          </table>
          
    </div>
</div>
<script type="text/javascript">
var defectTopN = {
        xData : [],
        yData : [],
        option : {
                title : {
                    text : "<@label key='defectDefine.C'>缺陷</@label>TOP${condition.numPerPage!''}",
                    x : 'center'
                },
                tooltip : {
                    trigger: 'axis'
                },
                toolbox: {
                    show : false
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        data : []
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [ {
                    type : 'bar',
                    barWidth: <#if condition.numPerPage?? && condition.numPerPage gt 5>40<#else>80</#if>, 
                    itemStyle : {
                        normal : {
                            label : {
                                show : true,
                                position : 'top',
                                formatter : '{b}\n{c}'
                            }
                        }
                    },
                    markPoint : {
                        tooltip : {
                            trigger : 'item',
                            backgroundColor : 'rgba(0,0,0,0)',
                        },
                        data : []
                    }
                } ],
                
                noDataLoadingOption:{
                    text :"<@label key='defectDefine.C'>缺陷</@label>TOP<@label key='noData.C'>暂无数据</@label>",
                    effect : 'whirling',
                       effectOption:{
                           backgroundColor:"#fff"
                       },
                       textStyle : {
                         fontSize : 20
                       }
                }
            }
    }
    $(function() {
        initAdvancedQuery(navTab.getCurrentPanel(), 'defect_topN');
        $("a[name='defectCount']", navTab.getCurrentPanel()).each(function(){
            var title = $(this).attr("title");
            if(title != "总计"){
            	defectTopN.xData.push(title);
            	defectTopN.yData.push($(this).text());
            }
        });
        
        require.config({
            paths : {
                   echarts : '${rc.getContextPath()}/manage/js/echarts'
               }
           });
           require(
               [
                   'echarts',
                   'echarts/theme/macarons',
                   'echarts/chart/line',   // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
                   'echarts/chart/bar'
                   
               ],
               function (ec) {
                   var myChart = ec.init($('#chartHolder', navTab.getCurrentPanel())[0]);
                   defectTopN.option.xAxis[0].data = defectTopN.xData;
                   defectTopN.option.series[0].data = defectTopN.yData;
                   myChart.setOption(defectTopN.option,true);
               });
    });
</script>
